import React, {useState,useEffect} from 'react'
import './less/ListTable.less'
import { Space, Table, Button,message } from 'antd';
import moment from 'moment';
import {ArticleListApi,ArticleDeiApi} from '../request/api'
import {useNavigate} from 'react-router-dom'

//标题组件
function MyTitle(props){
  return (
    <div>
      {/* target="_blank" 新窗口打开 */}
        <a className='table_title' href={'http://codesohigh.com:8765/articel/'+props.id} target="_blank">{props.title}</a>
        <p style={{color:'#999'}}>{props.subTitle}</p>
    </div>
  )
}

export default function ListTable() {

    const navigate = useNavigate()

    //列表数组
    const [arr,setArr] = useState([])

    //分页
    const [pagination,setPagination] = useState({current: 1,pageSize: 10,total: 0})


    //提取请求的代码（封装请求的一个函数）
    const geArticleList = (current,pageSize)=>{
      ArticleListApi({
        num: current,
        count: pageSize
      }).then(res=>{
            
        if(res.errCode===0){
          console.log(res.data);
          //更改pagination
          let {num,count,total} = res.data;
          setPagination({
            current: num,
            pageSize: count,
            total
          })

            //深拷贝
            let newArr = JSON.parse(JSON.stringify(res.data.arr));
            //声明一个空数组
            let myarr = []
            /*
              1.要给每个数组项加key，让key的值等于id
              2.需要有一套解标签结构予一个属性
            */
              newArr.map(item => {
                //以下模板死垃圾
                // item.key = item.id;
                // // 2022-03-03 20:33:06
                // //安装momenty依赖，设置时间格式
                // item.date = moment(item.date).format("YYYY-MM-DD hh:mm:ss")
                // item.mytitle = `
                // <div>
                //   <Link className='table_title' to='/'>${item.title}</Link>
                //   <p style={{color:'#999'}}>${item.subTitle}</p>
                // </div>
                // `;
                let obj = {
                  key: item.id,
                  date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"),
                  mytitle: <MyTitle title={item.title} subTitle={item.subTitle} id={item.id}/>
                }
                //map循环处理完一项以后放(push)到myarr空数组中
                myarr.push(obj)
              });
              console.log(newArr)
              setArr(myarr)
        }
    })
    }

    //请求文章列表(mounted)
    useEffect(()=>{
      geArticleList(pagination.current,pagination.pageSize);
    },[])

    //分页显示的函数
    const pageChange = (arg)=>{
      console.log(arg);
      //调用上面封装好的函数
      geArticleList(arg.current,arg.pageSize);
    }


    //删除按钮
  const delFn = (id)=>{
    console.log(id);
    //得到id后删除
    ArticleDeiApi({id}).then(res=>{
      console.log(res);
      if(res.errCode===0){
        //提示删除成功
        message.success(res.message)
        //要么重新刷新页面，要么重新请求数据 或者直接window.reload，还有调用上面getList(1);
        //或者增加变量的监测
        geArticleList(1,pagination.pageSize);
      }
    })
  }

    //每一列数据
    const columns = [
    {
      dataIndex: 'mytitle',
      key: 'mytitle',
      width: '60%',
      // render: (text) => <div dangerouslySetInnerHTML={{__html:text}}></div>  dangerously不安全，弃用
      render: (text) => <div>{text}</div>
    },
    {
      dataIndex: 'date',
      key: 'date',
      render: (text) => <p>{text}</p>
    },
    {
      key: 'action',
      render: text => {
        return (
          <Space size="middle">
              {/* text.key就是id */}
              <Button type='primary' onClick={()=>navigate('/edit/'+text.key)}>编辑</Button>
              <Button type='danger' onClick={()=>delFn(text.key)}>删除</Button>
          </Space>
        )
      },
    },
  ];

  return (
    <div className='list_table'>
        {/* //columns列，dataSource数据*/}
        <Table 
        showHeader={false} 
        columns={columns} 
        dataSource={arr}
        onChange={pageChange}
        pagination={pagination} />
    </div>
  )
}


